<script setup>

</script>

<template>
  <div class="nav">
    <div class="nav kb">
      <router-link to="/prompt" class="custom-link">PROMPT</router-link>
    </div>

    <div class="nav prompt">
      <router-link to="/kb" class="custom-link">KNOWLEDGE</router-link>
    </div>

    <div class="nav chat">
      <router-link to="/" class="custom-link">CHAT</router-link>
    </div>

    <div class="nav api">
      <router-link to="/api" class="custom-link">API</router-link>
    </div>
  </div>
</template>

<style scoped>
.nav {
  width: 100%;
  height: 100%;
  //background-color: antiquewhite;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.nav .nav {
  height: 30px;
  background-color: black;
  color: azure;
  margin-bottom: 10px;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
}

.custom-link {
  text-decoration: none;  /* 去掉下划线 */
  color: white;            /* 字体颜色改为白色 */
}

.custom-link:visited {
  color: white;            /* 链接访问后的颜色 */
}

.custom-link:hover {
  color: white;            /* 链接悬停时的颜色 */
}

.custom-link:active {
  color: white;            /* 链接激活时的颜色 */
}

</style>